import { count, log } from "node:console";
import { url } from "node:inspector";
import { title } from "node:process";
import React, { Component, Ref } from "react";
type inpType = HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement;
interface iState {
  count: number;
}
interface iProps {
  title: string;
}

//高阶组件hoc是一个函数，参数是一个组件，返回值是一个新的组件
//1.可以将一些重复使用的数据或者函数旅在一个高阶组件中
//2.使用的时候，可以直接调用该高阶组件，得到一个被装饰后的组件
//page1想要一个页脚和一个标题
function withFooter(Com: any) {
  class Footer extends Component {
    state = {
      title: "非常大标题",
    };
    render() {
      return (
        <div>
          <Com title={this.state.title}></Com>
          <footer style={{ height: 50, backgroundColor: "#6cf" }}>页脚</footer>
        </div>
      );
    }
  }
  return Footer;
}

const Page1 = withFooter((props: iProps) => {
  return (
    <div>
      <h1> 页面1--------{props.title}</h1>
    </div>
  );
});
// function Page1 () {
//   return (
//     <div>
//      <h1> 页面1</h1>
//     </div>
//   );
// }

function Page2() {
  return (
    <div>
      <h1> 页面2</h1>
    </div>
  );
}

export default class App extends Component {
  render() {
    return (
      <div>
        <Page1></Page1>
        <hr />
        <Page2></Page2>
      </div>
    );
  }
}
